<template>
	<view class="wrap" catchtouchmove="true">
		
		<view class="wrap-i">
			<image class="bd-img" src="../../static/img/m1.jpg"></image>
			<view class="content">
				<image class="i-img" src="../../static/img/m2.jpg"></image>
				<view class="i-desc">乐器培训</view>
				<view @click="fnJoinClass" class="i-btn">加入班级</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			classInfo:{}
		},
		data(){
			return{
				
			}
		},
		methods:{
			fnJoinClass(){
				this.$emit('click',{})
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0,0,0,0.5);
		.wrap-i{
			width: 90%;
			height: 80%;
			//background: #15BB31;
			position: absolute;
			margin: auto;
			top: 0;left: 0;right: 0;bottom: 0;
			border-radius: 10px;
			overflow: hidden;
			.bd-img{
				width: 100%;
				height: 100%;
				//opacity: 0.8;
			}
			.content{
				width: 100%;
				height: 100%;
				display: flex;
				position: absolute;
				top: 0;left: 0;
				flex-direction:column;
				align-items: center;
				z-index: 9999;
				.i-img{
					width: 100px;
					height: 100px;
					border-radius: 100%;
					border: 1px solid #fff;
					margin-top: 30px;
				}
				.i-desc{
					font-size: 20px;
					font-weight: bold;
					color: #000;
					margin-top: 20px;
					text-shadow: 0 0 0.3em #fff, 0 0 0.3em #fff, 0 0 0.3em #fff;
				}
				.i-btn{
					width: 100px;
					height: 100px;
					background: #ff9900;
					border-radius: 100%;
					position: absolute;
					bottom: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					//background-image: linear-gradient(#ffb84d,#ff9900);
					color: #fff;
					font-size: 16px;
					&:active{
						background-color: #ffb84d;
					}
					
				}
			}
		}
	}
</style>
